<!-- 
  @name: 加注完成
  @date: 2020.3.2
 -->
<template>
	<view class="content">
		<!-- 标题栏 -->
		<nav-title navigate-back="10" title="加注已完成" :back-home="!hasIndex"></nav-title>

		<!-- 提示图 -->
		<view class="tip"></view>

		<!-- 支付详情 -->
		<view class="order">
			<view class="item">
				<text class="left">实际加注金额：</text>
				<text>{{ info.moneyFill || ''}}元</text>
			</view>
			<view class="item">
				<text class="left">实际加注量：</text>
				<text>
					{{ info.actualNum || ''}}
					<text v-text="info.units"></text>
				</text>
			</view>
			<view class="item" v-if="info.returnMoney > 0 && isShowRefund">
				<text class="left">退还金额：</text>
				<text>{{ info.returnMoney2 }}元</text>
			</view>
			<view class="item" v-if="info.compcode === 1 || info.compcode === 3 || info.compcode === 4">
				<text class="left">完成原因：</text>
				<text v-if="info.compcode === 1">3分钟内未提枪加注</text>
				<text v-else-if="info.compcode === 3">运营商接单失败</text>
				<text v-else-if="info.compcode === 4">加注机因故障停止</text>
			</view>
		</view>

		<!-- 加注完成后的确定按钮 -->
		<button class="btn_submit" @tap="goHome">确定</button>

		<!-- 领券的弹窗 -->
		<!-- <view class="_popup center" v-if="showPopup">
			<view class="popup-info">
				<view class="title">恭喜您获得一张优惠券</view>
				<view class="ticket">
					<view class="left">
						<view class="mey">
							<text class="icon-1">￥</text>
							<text class="text-1" :class="tcInfo.couponAmount.length > 5 ? 't2' : ''">{{ tcInfo.couponAmount }}</text>
						</view>
					</view>
					<view class="middle">
						<view class="text-1 text_over">{{ tcInfo.operaName }}</view>
						<view class="text-2 text_over">加注满{{ tcInfo.couponOrderAmount }}元可用</view>
						<view class="text-3">{{ tcInfo.useBeginTime }}-{{ tcInfo.useEndTime }}</view>
					</view>
				</view>
				<button class="btn_submit_popup" @tap="drawTicket">立即领取</button>
			</view>
		</view> -->
		<!-- 领取优惠券弹窗2 -->
		<get-coupon2 ref="getCoupon2"  
			:doorMoney="couponInfo.couponOrderAmount" 
			:discountMoney="couponInfo.couponAmount" 
			:coupontype="couponInfo.couponClass" 
			:validityDays="couponInfo.validityDays"
			@confirm="$u.throttle(getCoupon, 500)"
		></get-coupon2>
		
		<!-- 领取优惠券成功弹窗 -->
		<get-coupon ref="getCoupon"></get-coupon>
		
		<!-- 关注公众号弹窗 -->
		<focus-officialAccount ref="focus" @loadSuc="loadSuc"></focus-officialAccount>
		<!-- 登录提示 -->
		<sign-in></sign-in>
	</view>
</template>

<script>
import getCoupon2 from '@/components/popup/get-coupon2.vue';
import getCoupon from "@/components/popup/get-coupon.vue"
import focusOfficialAccount from "@/components/popup/focus-officialAccount.vue";
export default {
	components: { getCoupon2, getCoupon, focusOfficialAccount },	
	data() {
		return {
			info: {
				returnMoney: 0
			}, //订单信息
			tcInfo: {}, //优惠券信息
			// showPopup: false, //是否显示优惠券弹窗
			hasIndex: true ,//是否有首页，若否则显示返回首页icon
			couponInfo:'' ,// 优惠券信息
			loadSuccess:'' // 组件加载成功
		}; 
	},
	computed: {
		// 是否显示退款金额
		isShowRefund() {
			let payType = this.$store.state.payType;
			return payType === 'teambalance' || payType === 'paybalance';
		}
	},
	async onLoad(options) {	
		this.getOrder();
		this.hasIndex = this.$hasIndex();
		this.$socket.commit('closeMsg', { index: -1 });
	}, 
	methods: {
		// 获取活动优惠券信息
		getAccoupon() {
			if(!this.info.recordCode) return;
			this.$http({
				url: this.$api.accoupon + 'getShopCouponList',
				data: {
					recordCode: this.info.recordCode
				}
			}).then(res => { 
				if(Array.isArray(res) && res.length) {
					this.couponInfo = res[0];
					this.$refs.getCoupon2.open();
				} 
				console.log('res',res);
			})
		}, 
		//点击确定返回首页
		goHome() {
			//函数返回层级与onUnLoad中的返回层级之和，为实际返回层级
			if (this.hasIndex) {
				uni.navigateBack({
					delta: 10
				});
			} else {
				uni.redirectTo({
					url: '/pagesUc/user/index'
				});
			}
		},
		//领取优惠券
		drawTicket() {
			this.showPopup = false;
			this.$http({
				url: this.$api.couponUrl + 'receivecoupon',
				data: {
					couponId: this.tcInfo.couponId
				}
			}).then(res => {
				this.$successToast('领取成功');
			});
		},
		//获取订单信息
		getOrder() {
			this.info = JSON.parse(this.$store.state.tmpData || '{}');
			// 查询是否有优惠券
			this.getAccoupon();
			if (this.info.returnMoney > 0) {
				this.info.returnMoney2 = this.$operation(this.info.returnMoney, '-', 0);
			}
			this.$store.commit('setTmpData', '');
		},
		
		// 领取优惠券
		async getCoupon() {
			if(this.couponInfo.couponClass==='CouponClass3') { // 分享券
				uni.redirectTo({
					url:`/pagesAc/coupon/shareCoupon?recordCode2=${this.info.recordCode}`
				})
				return ;
			};
			// 关注公众号
			// let res = await this.checkFocus();
			// if(!res && this.loadSuccess) {
			// 	return this.$refs.focus.open();
			// }
			
			// 关闭
			this.$refs.getCoupon2.close();
			this.$http({
				url: this.$api.accoupon + 'getCoupon',
				data: {
					couponId: this.couponInfo.id,
					couponType: this.couponInfo.drawType,
					userId: this.$store.state.userId,
					forwardUserId:'',
					recordCode: this.info.recordCode
				}
			}).then(res => {
				console.log('res', res);
				this.$successToast('领取成功');
			});
		},
		// 检测是否关注公众号
		async checkFocus() {
			let bool = await this.$http({
				url: this.$api.accoupon + 'isCarePublicNum',
				data: {
					userId: this.$store.state.userId
				}
			});
			return JSON.parse(bool);
		},
		// 关注公众号组件加载成功
		loadSuc(e) {
			console.log('组件加载成功');
			this.loadSuccess = true;
		}
	}
};
</script>

<style lang="scss">
::v-deep .u-mode-center-box {
	background: rgba(0, 0, 0, 0) !important;
}
/* 领券的弹窗 */
._popup.center {
	padding-top: 0;
	justify-content: center;
}
.popup-info {
	width: 514rpx;
	height: 540rpx;
	background-image: url('/static/wxImage/bg-coupon-popup.png');
	.title {
		width: 100%;
		margin-top: 190rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.ticket {
		display: flex;
		flex-direction: row;
		width: 482rpx;
		height: 154rpx;
		padding: 5rpx;
		margin: 0 16rpx;
		margin-top: 34rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15fIROANAxeAAAW-hV67zc891.png');
		.left {
			width: 116rpx;
			.mey {
				width: 100%;
				margin-top: 40rpx;
				text-align: center;
				color: $color-white;
			}
			.icon-1 {
				font-size: 20rpx;
			}
			.text-1 {
				font-size: 32rpx;
				margin-left: 2rpx;
			}
			.text-1.t2 {
				font-size: 26rpx;
			}
		}
		.middle {
			flex: 1;
			padding-left: 26rpx;
			.text-1 {
				margin-top: 22rpx;
				font-size: 20rpx;
			}
			.text-2 {
				margin-top: 14rpx;
				font-size: 24rpx;
			}
			.text-3 {
				margin-top: 16rpx;
				font-size: 20rpx;
			}
		}
	}
	.btn_submit_popup {
		margin-top: 24rpx;
	}
}

/* 提示图 */
.tip {
	width: 750rpx;
	height: 420rpx;
	background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14T_JKAU26kAAIQmz_AhZQ270.png');
}

/* 订单详情 */
.order {
	width: 100%;
	padding: 15rpx 30rpx;
	margin-top: $spacing-col;
	background-color: $color-white;
	.item {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding: 15rpx 0;
		color: $color-grey-dark;

		.left {
			flex: 1;
		}
	}
}

/* 加注完成后的确定按钮 */
.btn_submit {
	margin-top: 300rpx;
}
</style>
